<template>
    <div class="tian">
        <div class="top">
            <div class="box">
                <Tickets />
            </div>
            <span style="margin-left: 10px;">数据列表</span>
        </div>
        <div class="bottom">
            <el-row class="mb-4">
                <el-button @click="add">添加</el-button>
            </el-row>
        </div>
    </div>
    <!-- 表格 -->
    <div class="table-container">
        <el-table :data="Flash" border style="width: 100%" table-layout="auto">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="秒杀时间段名称" />
            <el-table-column prop="startTime" label="每日开始时间">
                <template #default="scope">
                    {{ dayjs(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="每日结束时间">
                <template #default="scope">
                    {{ dayjs(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column label="启用">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="redact(row.id)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="expurgate(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 添加和编辑弹框 -->
    <AddEditing :HideDisplay="HideDisplay" @cancel="Cprogram" @confirm="Notarize" :id="activityId" />
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import { ref } from 'vue';
import * as http from '@/request/http'
import AddEditing from './AddEditing.vue'

const Flash = ref<Iseckill[]>([])
const falseBox = () => {
    http.flashSs.flashSessionList().then(res => {
        console.log(res);
        Flash.value = res.data //渲染表格的数据
    })
}
falseBox() //渲染数据

// 当前活动id
const activityId = ref(0);

const HideDisplay = ref(false) //控制窗口显示隐藏

const add = () => { //点击添加按钮
    HideDisplay.value = true
    activityId.value = 0
}
const redact = (id: number) => { //编辑按钮
    activityId.value = id,
        HideDisplay.value = true
}
const Notarize = () => {
    HideDisplay.value = false
    falseBox()//重新渲染数据
}

const Cprogram = () => {
    HideDisplay.value = false
}

const expurgate = (id:number) => {  //删除按钮
    const idn = [id]
    ElMessageBox.confirm(
        '是否要删除该时间段?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => { //删除
        //发起请求，删除活动
        http.flashSs.IdeleteId(idn).then(res => {//判断是否成功删除活动
            if (res.code === 200) {
                ElMessage.success("成功删除")
                falseBox()
            }
        })
    }).catch(() => {
        ElMessage.warning('取消删除')
    })
}
</script>

<style scoped>
.top {
    display: flex;
}

.box {
    width: 15px;
    height: 15px;

}

.tian {
    display: flex;
    justify-content: space-between;

    border: 1px solid gainsboro;
    height: 50px;
    line-height: 50px;
    margin: 20px;
    border-radius: 10px;
    padding: 10px;
}

.bottom {
    margin-top: 10px;
}

.fen {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}
</style>